﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>物料产品管理</title>
    <link href="//unpkg.com/layui@2.9.20/dist/css/layui.css" rel="stylesheet">
</head>
<body>

    <!-- 查询条件 -->
    <form class="layui-form" action="">

        <div class="layui-form">
            <div class="layui-row layui-col-space16">

                <div class="layui-col-md4">
                    <div class="layui-input-wrap">

                        <div class="layui-input-group">
                            <div class="layui-input-split layui-input-prefix">
                                物料编码
                            </div>
                            <input type="text" id="productManageNodes" autocomplete="off" placeholder="请输入物料编码" lay-affix="clear" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">

                        <div class="layui-input-group">
                            <div class="layui-input-split layui-input-prefix">
                                物料名称
                            </div>
                            <input type="text" id="productManageNames" autocomplete="off" placeholder="请输入物料名称" lay-affix="clear" class="layui-input">
                        </div>
                    </div>
                </div>
                <!-- 按钮 -->


                <div class="layui-btn-container">
                    <button class="layui-btn" id="searchBtn" lay-submit lay-filter="demo2">搜索</button> 
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    @*  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-page-custom" lay-event="detail">
                    <span class="layui-badge-dot"></span> 新增
                    </button> *@
                </div>

                <div class="layui-btn-container">
                    <button type="button" class="layui-btn layui-btn-primary" lay-event="detail" lay-on="test-page-custom" onclick="adds()">
                        <span class="layui-badge-dot"></span> 新增
                    </button>
                </div>

            </div>
        </div>
    </form>

    <!-- 树形 -->
    <div style="float:left;width:260px;">
        <div id="ID-tree-demo"></div>
    </div>

    <div style="float:right;margin-right:20px;">
        <!-- 表格 -->
        <table class="layui-table">
            <colgroup>
                <col width="130">
                <col width="130">
                <col width="130">
                <col width="130">
                <col width="130">
                <col width="130">
                <col width="130">
                <col width="130">
                <col width="130">
                <col>
            </colgroup>
            <thead>
                <tr>
                    <th>物料编码</th>
                    <th>物料名称</th>
                    <th>规格型号</th>
                    <th>单位</th>
                    <th>物料/产品</th>
                    <th>所属分类</th>
                    <th>是否启用</th>
                    <th>设置安全库存</th>
                    <th>创建时间</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div id="demo-laypage-all"></div>
    </div>

    <!-- HTML Content -->
    <script src="//unpkg.com/layui@2.9.20/dist/layui.js"></script>
    <script>

        var form = layui.form;
        var laypage = layui.laypage;
        var layer = layui.layer;
        var $ = layui.$;
        var laydate = layui.laydate;
        var util = layui.util;

        //物料/产品 弹出层 添加
        function adds() {
            layer.open({
                type: 1,
                area: '900px',
                resize: false,
                shadeClose: true,
                title: '新增物料/产品',
                content: `
                                                            <div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
                                                            <div class="demo-login-container">

                                                                <div class="layui-form-item" >
                                                          <label class="layui-form-label">物料编码</label>
                                                                     <div class="layui-input-inline" style="width:200px">
                                                                      <input type="text" id="productManageNode" lay-verify="required" placeholder="请输入物料编码" autocomplete="off" class="layui-input" >

                                                                               <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="nodeAlls()">自动生成</button>
                                                        </div>


                                                                                    <div class="layui-input-inline">

                                                                                    </div>
                                                                    </div>

                                                                <div class="layui-form-item">
                                                                <label class="layui-form-label">物料名称</label>
                                                                <div class="layui-input-inline">
                                                                                            <input type="text" name="productManageName" id="productManageName" lay-verify="required" placeholder="请输入物料名称" autocomplete="off" class="layui-input">
                                                                    </div>
                                                            </div>

                                                            <div class="layui-form-item">
                                                                <label class="layui-form-label">规格型号</label>
                                                                <div class="layui-input-inline">
                                                                     <textarea name="productManageNumber" id="productManageNumber" lay-verify="required" placeholder="请输入规格型号" autocomplete="off" class="layui-textarea" style="width:350px"></textarea>
                                                                </div>
                                                                </div>


                                                 <div class="layui-form-item">
                                                    <label class="layui-form-label">单位</label>
                                                    <div class="layui-input-inline">
                                                                <select id="unites" lay-filter="testSelect" required>
                                                            <option value="0">请选择单位</option>
                                                                                    <option value="克">克</option>
                                                                                    <option value="个">个</option>
                                                                                    <option value="公斤">公斤</option>
                                                                                            <option value="吨">吨</option>
                                                                                                    <option value="米">米</option>
                                                                                            <option value="分米">分米</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                           <div class="layui-form-item">
                                                                    <label class="layui-form-label" style="width:150px">物料/产品分类</label>
                                                                <div class="layui-input-inline">
                                                                       <select id="productTypeId" name="productTypeId" >

                                                                       </select>

                                                                </div>
                                                            </div>

                                                             <label class="layui-form-label" style="width:150px">高价值/易被盗物品</label>
                                                               <div class="layui-input-block">
                                                                  <input type="checkbox" name="arr[0]">
                                                             </div>
                                                               </div>

                                                                <div class="layui-form-item">

                                                </div>

                                        <div class="layui-form-item">
                                          <label class="layui-form-label">是否启用</label>
                                         <div class="layui-form">
                                                      <input type="radio" name="isNo" value="1" title="是" checked>
                                                     <input type="radio" name="isNo" value="2" title="否">
                                            </div>
                                        </div>

                                                <div class="layui-form-item">
                                                         <label class="layui-form-label">批次管理</label>
                                            <div class="layui-input-block">
                                                      <input type="checkbox" name="batchs" lay-skin="switch" lay-filter="switchTest" >
                                            </div>
                                                </div>


                                                   <div class="layui-form-item">
                                                  <label class="layui-form-label">安全库存</label>
                                                 <div class="layui-form">
                                                              <input type="radio" name="inventory" value="1" title="是" checked>
                                                             <input type="radio" name="inventory" value="2" title="否">
                                                    </div>
                                                </div>

                                                        <div class="layui-form-item">
                                                                        <label class="layui-form-label">备注</label>
                                                                        <div class="layui-input-inline">
                                                                                            <textarea name="remark" id="remark" lay-verify="required" placeholder="请输入备注" autocomplete="off" class="layui-textarea" style="width:400px"></textarea>
                                                                        </div>
                                                        </div>

                                                                    <div class="layui-btn-container">
                                                                        <button type="button" class="layui-btn layui-bg-blue"  lay-submit lay-filter="demo1" >确定</button>
                                                                        <button type="button" class="layui-btn ">取消</button>
                                                            </div>

                                                            </div>
                                                            </div>
                                                        </div>
                                                                                                                                                                                                                                                                                                                                `,
                success: function () {
                    // 对弹层中的表单进行初始化渲染
                    form.render(); 
                    console.log("#!!!!");

                    var tree = layui.tree;
                    console.log("1231312312");
                    // 模拟数据
                    var datas = [{ title: '物料产品分类', id: 1, children: [{ title: '原材料', id: 2, children: [{ title: '原材料', id: 10001 }, { title: '手机', id: 3 }] }, { title: '轴承', id: 4 }, { title: '金砖设备产品工艺', id: 5 }, { title: '航空航天设备', id: 6 }] }];
                    console.log(1,datas);

                    datas.forEach(item => {
                        console.log(item);
                        var str = '<optgroup label="' + item.title + '">';
                        item.children.forEach(x => {
                            str += '<option value="' + x.id + '">' + x.title + '</option>';
                        })
                        str += '</optgroup>'
                        $("#productTypeId").append(str);
                    })

                    //重新渲染表单
                    form.render();

                    //新增
                    // 提交事件
                    form.on('submit(demo1)', function (data) {
                        var data = {
                            productManageNode: $("#productManageNode").val(), //物料编号
                            productManageName: $("#productManageName").val(), //物料名称
                            productManageNumber: $("#productManageNumber").val(), //规格型号
                            unites: $("#unites").val(), //单位
                            productTypeId: $("#productTypeId").val(), //物料/分类
                            //单选框
                            isNo: $("[name=isNo]").val(), //是否启用
                            //batchs: $("#batchs").val(),
                            batchs: $("[name=batchs]").val()=="on"?0:1, //批次管理
                            inventory: $("[name=inventory]").val(), //安全库存
                            remark: $("#remark").val(),  //备注
                        };

                        console.log(data);
                        $.ajax({
                            url: '@ViewBag.FoundationWrite' + "/api/ProductType/ProductManagesAdds",
                            data: JSON.stringify(data),
                            type: "post",
                            dataType: "json",
                            contentType: "application/json",
                            success: function (res) {
                                console.log(123, res);
                                if (res.code > 0) {
                                    layer.alert("添加成功", {
                                        title: ''
                                    });
                                }
                                else {
                                    alert('提交失败')
                                }
                            }
                        })
                        // layer.alert(JSON.stringify(field), {
                        //     title: '当前填写的字段值'
                        // });
                        // 此处可执行 Ajax 等操作
                        return false; // 阻止默认 form 跳转
                    });
                }
            });
        }

        //自动生成编码
        function nodeAlls() {
            var datec = new Date()
            var year = datec.getFullYear();
            var month = (datec.getMonth() + 1).toString().padStart(2, "0")
            var date = (datec.getDate() + 1).toString().padStart(2, "0")
            var hours = datec.getHours()
            var minute = (datec.getMinutes()).toString().padStart(2, "0")
            var seconds = (datec.getSeconds()).toString().padStart(2, "0")
            // var Encoding = "IF";
            var result = "IF" + year + month + date + hours + minute + seconds;
            console.log(result);
            $("#productManageNode").val(result);

            //重新渲染表单
            form.render();
        }

    </script>
</body>
</html>

<script>
    layui.use(['form', 'laydate', 'util'], function () {
        var laypage = layui.laypage;
        var pageIndex = 1;
        var pageSize = 1;
        var productManageNode = "";
        var productManageName = "";
        var $ = layui.$;
        var layer = layui.layer;
        var util = layui.util;
        var tree = layui.tree;
        
        $(function () {
            Show(pageIndex, pageSize); //显示
            treeList(); //树形

        })
        Show(pageIndex, pageSize);

        //显示
        function Show(index, size) {
            $.post({
                url: '@ViewBag.FoundationWrite' + '/api/ProductType/ProductManagesLists',
                data: JSON.stringify
                    ({
           
                        pageIndex: index,
                        pageSize: size,
                        productManageNodes: $("#productManageNodes").val(),
                        productManageNames: $("#productManageNames").val(),
                    }),
                async: false,
                dataType: "json",
                contentType: "application/json",
                success: res => {
                    var count = "";

                    // var aa = moment(this.dieDate).format("YYYY-MM-DD HH:mm:ss")
                    // var bb = this.dieReason == 1 ? "腹泻" : this.dieReason == 2 ? "肺炎" : this.dieReason == 3 ? "发热" : "猝死";
                    // var cc = this.sheepSex == 0 ? "公" : "母";
                    //var aa = moment(this.productManageTime).format("YYYY-MM-DD HH:mm:ss")                
                    //var ee = this.isNo == 1 ? "禁用" : "启用"; 
                    //var aa = moment(this.productManageTime).format("YYYY-MM-DD")
                   // var bb = this.productZoo == 1 ? "物料" : "分类";

                    $.each(res.data, function () {

                        count += `<tr>
                                        <td>${this.productManageNode}</td>
                                        <td>${this.productManageName}</td>
                                        <td>${this.productManageNumber}</td>
                                        <td>${this.unites}</td>
                                        <td>${this.productZoo}</td>
                                        <td>${this.productTypeId}</td>
                                        <td>${this.isNo}</td>
                                        <td>${this.inventory}</td>
                                        <td>${this.productManageTime.replace("T", " ").substring(0, 19)}</td>
                                    </tr>
                                    `
                    })
                    //pagedCount = res.pagedCount;
                    //pcount = res.totalCount;
                    $("tbody").html(count)
                    // console.log(res.data)

                    //var page = Math.ceil(res.totalCount / 5);  //总页数
                    console.log(996, pageSize, pageIndex, res);
                    // 完整显示
                    laypage.render({
                        elem: 'demo-laypage-all', // 元素 id
                        count: res.totalCount, // 数据总数
                        curr: index,//当前页
                        limit: size,//每页几条
                        limits: [1, 2, 3],
                        layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
                        jump: function (obj, first) {
                            if (!first) {
                                Show(obj.curr, obj.limit);
                            }
                        }
                    });
                }
            })
        }
        //树形
        function treeList() {
            //var datas = [{ title: '物料产品分类', id: productTypeId, field: 'productTypeName', checked: true, spread: true, children: [{ title: 'B-1-1 可允许跳转', id: 3, field: 'name11', href: '', children: [{ title: 'C-1-1-3', id: 23, field: '', children: [{ title: 'D-1-1-3-1', id: 24, field: '', children: [{ title: 'E-1-1-3-1-1', id: 30, field: '' }, { title: 'E-1-1-3-1-2', id: 31, field: '' }] }] }, { title: 'C-1-1-1', id: 7, field: '', children: [{ title: 'D-1-1-1-1 可允许跳转', id: 15, field: '', href: '' }] }, { title: 'C-1-1-2', id: 8, field: '', children: [{ title: 'D-1-1-2-1', id: 32, field: '' }] }] }, { title: 'B-1-2', id: 4, spread: true, children: [{ title: 'C-1-2-1', id: 9, field: '', disabled: true }, { title: 'C-1-2-2', id: 10, field: '' }] }, { title: 'B-1-3', id: 20, field: '', children: [{ title: 'C-1-3-1', id: 21, field: '' }, { title: 'C-1-3-2', id: 22, field: '' }] }] }, { title: 'A-2', id: 2, field: '', spread: true, children: [{ title: 'B-2-1', id: 5, field: '', spread: true, children: [{ title: 'C-2-1-1', id: 11, field: '' }, { title: 'C-2-1-2', id: 12, field: '' }] }, { title: 'B-2-2', id: 6, field: '', children: [{ title: 'C-2-2-1', id: 13, field: '' }, { title: 'C-2-2-2', id: 14, field: '', disabled: true }] }] }, { title: 'A-3', id: 16, field: '', children: [{ title: 'B-3-1', id: 17, field: '', fixed: true, children: [{ title: 'C-3-1-1', id: 18, field: '' }, { title: 'C-3-1-2', id: 19, field: '' }] }, { title: 'B-3-2', id: 27, field: '', children: [{ title: 'C-3-2-1', id: 28, field: '' }, { title: 'C-3-2-2', id: 29, field: '' }] }] }];
            $.post({
                url: '@ViewBag.FoundationWrite' + "/api/ProductType/TreesList",
                data: JSON.stringify({}),
                dataType: "json",
                contentType: "application/json",
                success: d => {
                    datas = d.data;
                    console.log(datas);
                    tree.render({
                        elem: '#ID-tree-demo',
                        data: datas,
                        showCheckbox: false,  // 是否显示复选框
                        onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                        id: 'demo-id-1',
                        showLine: false,
                        isJump: true, // 是否允许点击节点时弹出新窗口跳转
                        click: function (obj) {
                            var data = obj.data;  //获取当前点击的节点数据
                            layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
                        }
                    });
                }
            })
        }
        // 渲染
        treeList();
    })

</script>